<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="zh-CN">
<head>
<meta content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" name="viewport" />
<meta charset="utf-8">
<title>端午福利大放送</title>
<script type="text/javascript" src="./js/flexible.js"></script>
<style>
*{
	margin: 0;
	padding: 0;
}
img{
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0;
}
li{
	list-style: none;
	text-align: left;
	padding-left: 5px;
}
a{
	text-decoration: none;
	color: #FFF;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.clearfix:before,.clearfix:after {
	display: table;
	content: " ";
	line-height: 0;
	width: 100%;
	visibility: hidden;
}

.clearfix:after {
	clear: both;
}
.wrapper{
	min-height: 200px;
	border-top: none;
	width: 9.653333rem;
	margin: 0 auto;
	background: #40dcc4;
	padding: 0.6rem 0;
	position: relative;
}
.color-fefefe {
	color: #FEFEFE;
}
.flex {
	display: flex;
	flex-wrap: wrap;
}
.flex-1 {
	flex: 1;
}
.jc-space-between {
	justify-content: space-between;
}
.dragon-boat-tips {
	height: 1.32rem;
	position: absolute;
	left: 50%;
	top: -0.99rem;
	z-index: 9;
}
.raiders, .rules{
	width: 3.14rem;
	margin-left: -1.57rem;
}
.convert {
	width: 3.92rem;
	margin-left: -1.96rem;
}
.title {
	color: #FEFEFE;
	padding-left: 0.12rem;
	font-size: 16px;
	position: relative;
	margin-bottom: 0.2rem;
}
.title:before {
	display: table;
	content: " ";
	background: #FEFEFE;
	position: absolute;
	width: 0.08rem;
	height: 0.38rem;
	left: -0.05rem;
	top: 0.12rem;
}

.raiders-content,
.rules-content {
	padding: 0 0.16rem;
	color: #02493e;
	font-size: 14px;
} 
.raiders-content p,
.rules-content p {
	margin: 0.2rem 0;
}
.calc_invest{
	color: #02493e;
	font-size: 14px;
	margin: 0.2rem 0 0.4rem 0;
}
.calc_invest input{
	width: 2.0rem;
	height: 0.94rem;
	border: 1px solid #fed731;
	text-align: center;
	font-size: 14px !important;
}
input::-webkit-input-placeholder{
	color: #02493e !important;
}
input:-moz-placeholder{
	color: #02493e !important;
}
input:-moz-placeholder, textarea:-moz-placeholder {
　　color: #02493e !important;
}
input:-ms-placeholder{
	color: #02493e !important;
}
.convert-container {
	margin: 0 0.24rem;
	position: relative;
}
.convert-wrap {
	width: 2.94rem;
	min-height: 3.07rem;
	margin-top: 0.22rem;
	background: #088366;
}
.convert-wrap:first-child {
	border-radius: 15px 0 0 0;
}
.convert-wrap:nth-child(3) {
	border-radius: 0 15px 0 0;
}
.convert-wrap:nth-child(10) {
	border-radius: 0 0 0 15px;
}
.convert-wrap:last-child {
	border-radius: 0 0 15px 0;
}
.convert-content {
	width: 2.74rem;
	height: calc(100% - 0.24rem);
	margin: 0.12rem auto;
	background: #027258;
	text-align: center;
}
.convert-content-first{
	border-radius: 15px 0 0 0;
}
.convert-content-third{
	border-radius: 0 15px 0 0;
}
.convert-content-tenth{
	border-radius: 0 0 0 15px;
}
.convert-content-last{
	border-radius: 0 0 15px 0;
}
.prize {
	font-size: 12px;
}
.prize-first img {
	border-radius: 15px 0 0 0;
}
.prize-third img {
	border-radius: 0 15px 0 0;
}
.btn-convert {
	color: #fed731;
	font-size: 16px;
	margin: 0.2rem 0;
}
.see-detaile {
	position: absolute;
	right: 0.24rem;
	top: 0.4rem;
	font-size: 12px;
	color: #02493e;
}
.mask{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	z-index: 98;
	display: none;
}
.pop-up{
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left: -3.56rem;
	margin-top: -2.51rem;
	width: 7.12rem;
	height: 5.02rem;
	background: #40dcc4;
	z-index: 99;
    border-radius: 16px;
    text-align: center;
    background: url(img/popup-bg.png) no-repeat center bottom;
    background-size: 100%;
    display: none;
}
</style>
</head>
<body style="background: #0fa18b;">
<div style="width: 100%;"><img src="http://laicunba.b0.upaiyun.com/lcb/activity/dragon_boat_top.png"></div>

<!-- - 活动攻略 - -->
<div class="wrapper">
	<div class="dragon-boat-tips raiders"><img src="img/dragon-boat-raiders.png"></div>
	<div style="margin: 0 0.2rem;">
		<div class="title">端午龙舟：</div>
		<div class="rules-content">
			<p>投资银票宝大于15天以上项目，可获得对应划龙舟里程数，里程数=投资金额×天数÷365；</p>
			<p class="color-fefefe" style="font-size: 16px;">里程计算器：</p>
			<div class="calc_invest">
				<input type="number" id="input_amount" style="width: 2.3rem" placeholder="投资本金" /> * 
				<input type="number" id="input_period" style="width: 1.4rem" placeholder="天数" /> /365=
				<input type="number" id="compute_result" style="width: 2.1rem" readonly="readonly" placeholder="里程数" /> 公里
			</div>
		</div>
		<div class="title">捷径小路：</div>
		<div class="rules-content">
			<p>活动期间，邀友注册且完成首投（除随存宝外），可获得100里程数，所获里程奖励自动到账；（每人每天邀友首投上限5人）</p>
			<p>累计的里程数在达到对应里程后，可兑换相应大礼，兑换奖品无限制哦！</p>
		</div>
	</div>
</div>

<!-- - 奖品兑换区 - -->
<div class="wrapper" style="margin: 1.24rem auto;">
	<div class="dragon-boat-tips convert"><img src="img/dragon-boat-convert.png"></div>
	<div style="text-align:center;margin: 0.27rem 0;font-size: 16px;position: relative;color: #02493e;">当前里程数：<span style="border-bottom: 1px solid #02493e;"><c:choose><c:when test="${loginStatus == '1' }"><c:choose><c:when test="${vcoinBalance > 0 }">${vcoinBalance }</c:when><c:otherwise>0</c:otherwise></c:choose></c:when><c:otherwise>*****</c:otherwise></c:choose></span>
		<a id="dragon_boat_bill" href="javascript:void(0);" class="see-detaile"  style="font-size: 14px;">查看详情 »</a>
	</div>
	<div class="flex jc-space-between convert-container">
		<div class="convert-wrap">
			<div class="convert-content convert-content-first">
				<div class="prize prize-first">
					<img src="img/dragon-cash-5.png">
				</div>
				<div class="btn-convert" rel="001">兑换 »</div>
			</div>
		</div>
		<div class="convert-wrap">
			<div class="convert-content">
				<div class="prize">
					<img src="img/dragon-rate-05.png">
				</div>
				<div class="btn-convert" rel="002">兑换 »</div>
			</div>
		</div>
		<div class="convert-wrap">
			<div class="convert-content convert-content-third">
				<div class="prize prize-third">
					<img src="img/dragon-cash-55.png">
				</div>
				<div class="btn-convert" rel="003">兑换 »</div>
			</div>
		</div>
		<div class="convert-wrap">
			<div class="convert-content">
				<div class="prize">
					<img src="img/dragon-jd-50.png">
				</div>
				<div class="btn-convert" rel="004">兑换 »</div>
			</div>
		</div>
		<div class="convert-wrap">
			<div class="convert-content">
				<div class="prize">
					<img src="img/dragon-cash-200.png">
				</div>
				<div class="btn-convert" rel="005">兑换 »</div>
			</div>
		</div>
		<div class="convert-wrap">
			<div class="convert-content">
				<div class="prize">
					<img src="img/dragon-jd-200.png">
				</div>
				<div class="btn-convert" rel="006">兑换 »</div>
			</div>
		</div>
		<div class="convert-wrap">
			<div class="convert-content">
				<div class="prize">
					<img src="img/dragon-cash-500.png">
				</div>
				<div class="btn-convert" rel="007">兑换 »</div>
			</div>
		</div>
		<div class="convert-wrap">
			<div class="convert-content">
				<div class="prize">
					<img src="img/dragon-jd-500.png">
				</div>
				<div class="btn-convert" rel="008">兑换 »</div>
			</div>
		</div>
		<div class="convert-wrap">
			<div class="convert-content">
				<div class="prize">
					<img src="img/dragon-cash-3000.png">
				</div>
				<div class="btn-convert" rel="009">兑换 »</div>
			</div>
		</div>
		<div class="convert-wrap">
			<div class="convert-content convert-content-tenth">
				<div class="prize">
					<img src="img/dragon-ipad.png">
				</div>
				<div class="btn-convert" rel="010">兑换 »</div>
			</div>
		</div>
		<div class="convert-wrap">
			<div class="convert-content">
				<div class="prize">
					<img src="img/dragon-iphone.png">
				</div>
				<div class="btn-convert" rel="011">兑换 »</div>
			</div>
		</div>
		<div class="convert-wrap">
			<div class="convert-content convert-content-last">
				<div class="prize">
					<img src="img/dragon-mb.png">
				</div>
				<div class="btn-convert" rel="012">兑换 »</div>
			</div>
		</div>
	</div>
</div>
<!-- - 活动规则 - -->
<div class="wrapper">
	<div class="dragon-boat-tips rules"><img src="img/dragon-boat-rules.png"></div>
	<div style="margin: 0 0.2rem;">
		<div class="title">活动内容：</div>
		<div class="rules-content">
			<p>1、活动期间，用户通过每日“投资-邀请”方式获得里程数，里程数到达“对应里程”可进行领取操作；</p>
			<p>2、活动期间，获得到的里程数，领取里程奖励后，里程数会减少。</p>
		</div>
		<div class="title">奖励发放：</div>
		<div class="rules-content">
			<p>1、加息券、现金券奖励在里程达到相应数值，用户手动点击领取即可立即获得，可在【我的】-【我的红包】中查看；</p>
			<p>2、所有实物奖励均通过正规渠道购买，由第三方提供售后服务；</p>
			<p>3、实物奖励将于活动结束后10个工作日内由客服联系，并获取您的收货地址，为您安排寄出，请随时保持手机畅通。</p>
		</div>
		<div class="title">防止作弊：</div>
		<div class="rules-content">
			<p>活动期间禁止任何作弊行为，包括但不限于通过软件进行批量操作，积分墙刷任务，邀请刷单，网赚平台等方式利用本次活动进行牟利，一经发现平台将取消参与资格，并有权追回所发奖励。</p>
		</div>
	</div>
</div>
<div style="margin: 0.36rem 0;text-align: center;">*活动最终解释权归来存吧所有</div>
<div class="mask"></div>
<div class="pop-up" style="font-size: 14px;">
	<!-- - 可领取状态 - -->
	<div class="yes-status" style="display: none;">
		<div style="border-bottom: 1px solid #02493e;margin: 0.48rem 0 0.21rem 0;padding-bottom: 0.21rem;"></div>
		<div class="flex">
			<div class="flex-1 btn-cancel" style="border-right: 1px solid #02493e;color: #d91c26;">取消</div>
			<div class="flex-1 btn-sure">确认</div>
		</div>
	</div>
	<!-- - 领取成功状态 - -->
	<div class="receive-success" style="display: none;">
		
	</div>
	<!-- - 不可领取状态 - -->
	<div class="no-status" style="display: none;">
		<div style="margin: 0.8rem 0;text-align: center;">对不起，您的里程数<br/>不足以兑换该奖品</div>
	</div>
</div>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="activity.js"></script>
<script type="text/javascript">
$(function(){
	$(".mask,.btn-cancel").click(function(){
// 		$(".pop-up,.mask,.no-status,.yes-status,.receive-success").hide();
		window.location.reload();
	});
	$(".btn-convert").click(function() {
		var index = Number($(this).attr("rel"));
		var device = '${param.device}';
		var app_token = '${param.app_token}';
		var vcoin = '${vcoinBalance }';
		var param = {
			t :new Date(),
			app_token:app_token
		};
		$.post("dragon_boat_login_status.htm", param, function(data) {
			if(data.loginStatus == 1) {
				switch(index){
					case 1: 
						if(vcoin >= 300) {
							$(".yes-status div:first").html('您将消耗<span rel="001">300</span>里程数来兑换<br/>5元现金券');
							$(".pop-up,.mask,.yes-status").show();
						} else {
							$(".no-status div").html('抱歉，您的里程数<br/>不足以兑换该奖品');
							$(".pop-up,.mask,.no-status").show();
							setTimeout(function(){$(".pop-up,.mask,.no-status").hide();}, 3000);
						}
						break;
					case 2: 
						if(vcoin >= 300) {
							$(".yes-status div:first").html('您将消耗<span rel="002">300</span>里程数来兑换<br/>0.5%加息券');
							$(".pop-up,.mask,.yes-status").show();
						} else {
							$(".no-status div").html('抱歉，您的里程数<br/>不足以兑换该奖品');
							$(".pop-up,.mask,.no-status").show();
							setTimeout(function(){$(".pop-up,.mask,.no-status").hide();}, 3000);
						}
						break;
					case 3: 
						if(vcoin >= 5888) {
							$(".yes-status div:first").html('您将消耗<span rel="003">5888</span>里程数来兑换<br/>55元现金券');
							$(".pop-up,.mask,.yes-status").show();
						} else {
							$(".no-status div").html('抱歉，您的里程数<br/>不足以兑换该奖品');
							$(".pop-up,.mask,.no-status").show();
							setTimeout(function(){$(".pop-up,.mask,.no-status").hide();}, 3000);
						}
						break;
					case 4: 
						if(vcoin >= 5888) {
							$(".yes-status div:first").html('您将消耗<span rel="004">5888</span>里程数来兑换<br/>50元京东E卡');
							$(".pop-up,.mask,.yes-status").show();
						} else {
							$(".no-status div").html('抱歉，您的里程数<br/>不足以兑换该奖品');
							$(".pop-up,.mask,.no-status").show();
							setTimeout(function(){$(".pop-up,.mask,.no-status").hide();}, 3000);
						}
						break;
					case 5: 
						if(vcoin >= 20000) {
							$(".yes-status div:first").html('您将消耗<span rel="005">20000</span>里程数来兑换<br/>200元现金券');
							$(".pop-up,.mask,.yes-status").show();
						} else {
							$(".no-status div").html('抱歉，您的里程数<br/>不足以兑换该奖品');
							$(".pop-up,.mask,.no-status").show();
							setTimeout(function(){$(".pop-up,.mask,.no-status").hide();}, 3000);
						}
						break;
					case 6: 
						if(vcoin >= 20000) {
							$(".yes-status div:first").html('您将消耗<span rel="006">20000</span>里程数来兑换<br/>200元京东E卡');
							$(".pop-up,.mask,.yes-status").show();
						} else {
							$(".no-status div").html('抱歉，您的里程数<br/>不足以兑换该奖品');
							$(".pop-up,.mask,.no-status").show();
							setTimeout(function(){$(".pop-up,.mask,.no-status").hide();}, 3000);
						}
						break;
					case 7: 
						if(vcoin >= 41600) {
							$(".yes-status div:first").html('您将消耗<span rel="007">41600</span>里程数来兑换<br/>500元现金券');
							$(".pop-up,.mask,.yes-status").show();
						} else {
							$(".no-status div").html('抱歉，您的里程数<br/>不足以兑换该奖品');
							$(".pop-up,.mask,.no-status").show();
							setTimeout(function(){$(".pop-up,.mask,.no-status").hide();}, 3000);
						}
						break;
					case 8: 
						if(vcoin >= 41600) {
							$(".yes-status div:first").html('您将消耗<span rel="008">41600</span>里程数来兑换<br/>500元京东E卡');
							$(".pop-up,.mask,.yes-status").show();
						} else {
							$(".no-status div").html('抱歉，您的里程数<br/>不足以兑换该奖品');
							$(".pop-up,.mask,.no-status").show();
							setTimeout(function(){$(".pop-up,.mask,.no-status").hide();}, 3000);
						}
						break;
					case 9: 
						if(vcoin >= 220000) {
							$(".yes-status div:first").html('您将消耗<span rel="009">220000</span>里程数来兑换<br/>3000元现金券');
							$(".pop-up,.mask,.yes-status").show();
						} else {
							$(".no-status div").html('抱歉，您的里程数<br/>不足以兑换该奖品');
							$(".pop-up,.mask,.no-status").show();
							setTimeout(function(){$(".pop-up,.mask,.no-status").hide();}, 3000);
						}
						break;
					case 10: 
						if(vcoin >= 220000) {
							$(".yes-status div:first").html('您将消耗<span rel="010">220000</span>里程数来兑换<br/>Ipad mini 4（128G）');
							$(".pop-up,.mask,.yes-status").show();
						} else {
							$(".no-status div").html('抱歉，您的里程数<br/>不足以兑换该奖品');
							$(".pop-up,.mask,.no-status").show();
							setTimeout(function(){$(".pop-up,.mask,.no-status").hide();}, 3000);
						}
						break;
					case 11: 
						if(vcoin >= 375000) {
							$(".yes-status div:first").html('您将消耗<span rel="011">375000</span>里程数来兑换<br/>Iphone7（红色、128G）');
							$(".pop-up,.mask,.yes-status").show();
						} else {
							$(".no-status div").html('抱歉，您的里程数<br/>不足以兑换该奖品');
							$(".pop-up,.mask,.no-status").show();
							setTimeout(function(){$(".pop-up,.mask,.no-status").hide();}, 3000);
						}
						break;
					case 12: 
						if(vcoin >= 390000) {
							$(".yes-status div:first").html('您将消耗<span rel="012">390000</span>里程数来兑换<br/>MacBook Air13.3英寸');
							$(".pop-up,.mask,.yes-status").show();
						} else {
							$(".no-status div").html('抱歉，您的里程数<br/>不足以兑换该奖品');
							$(".pop-up,.mask,.no-status").show();
							setTimeout(function(){$(".pop-up,.mask,.no-status").hide();}, 3000);
						}
						break;
					};
			} else {
				if(device) {
					window.location.href="/h5/ext/activity/dragon_boat_festival.htm?device=app&app_view=login";
				} else {
					window.location.href="/h5/login.htm?tab=account&returnUrl=/h5/ext/activity/dragon_boat_festival.htm";
				}
			}
		}, "json");
	});
	
	$("input[type='number']").keyup(function() {
		if($("#input_amount").val() && $("#input_period").val()) {
			var input_amount = $("#input_amount").val();
			var input_period = $("#input_period").val();
			$("#compute_result").val(Math.floor(input_amount * input_period / 365));
		} else {
			$("#compute_result").val("");
		}
	});
	
	Activity.ready('${param.app_token}', "20170526", "", {
		t:new Date()
	}, function(data){
		$(".btn-sure").click(function(){
			$(".pop-up,.mask,.yes-status,.receive-success,.no-status").hide();
			
			var index = $(".yes-status div:first span").attr("rel");
			if(!index) {
				return;
			}
			var device = '${param.device}';
			var app_token = '${param.app_token}';
			var param = {
				t :new Date(),
				app_token:app_token
			};
			Activity.join(index, '', function(jdata){
				if(jdata.code=="SUCCESS"){
					switch(Number(index)){
						case 1: 
						case 2: 
						case 3: 
						case 5: 
						case 7: 
						case 9: 
							$(".receive-success").html('<div style="margin: 0.8rem 0;text-align: center;">恭喜您！兑换成功<br/>请到“我的-我的红包”查看</div>');
							break;
						case 2: 
						case 6: 
						case 8: 
							$(".receive-success").html('<div style="margin: 0.6rem 0;text-align: center;">恭喜您！兑换成功<br/>京东E卡将在活动结束三天内<br/>以短信形式发送到您注册的手<br/>机号中，请注意查收！</div>');
							break;
						case 10: 
						case 11: 
						case 12: 
							$(".receive-success").html('<div style="margin: 0.8rem 0;text-align: center;">恭喜您！兑换成功<br/>客服将在活动结束10天内联系您，<br/>请保持手机畅通！</div>');
							break;
					}
					$(".pop-up,.mask,.receive-success").show();
					setTimeout("window.location.reload()", 3000);
				}else if(jdata.code=="token_error"){
					if(device){
						console.log("app login");
						window.location.href="/h5/ext/activity/dragon_boat_festival.htm?device=app&app_view=login";
					}else{
						console.log("h5 login");
						window.location.href="/h5/login.htm?tab=account&returnUrl=/h5/ext/activity/dragon_boat_festival.htm";
					}
				}else if(jdata.code=="ACT_TIME_INVALID"){
	  				$(".no-status div").html('抱歉，活动未开始');
					$(".pop-up,.mask,.no-status").show();
					setTimeout("window.location.reload()", 3000);
				}else if(jdata.code=="ACTIVITYDO_NOT_EXIST"){
	  				$(".no-status div").html('抱歉，网络出现异常');
					$(".pop-up,.mask,.no-status").show();
					setTimeout("window.location.reload()", 3000);
				}else if(jdata.code=="CONDITIONS_CHECK_FAIL"){
	  				$(".no-status div").html('抱歉，您的里程数<br/>不足以兑换该奖品');
					$(".pop-up,.mask,.no-status").show();
					setTimeout("window.location.reload()", 3000);
				}else{
	  				console.log("参加活动失败："+JSON.stringify(jdata));
				}
			});
		});
	});
	
	$("#dragon_boat_bill").click(function() {
		var device = '${param.device}';
		var app_token = '${param.app_token}';
		var param = {
			t :new Date(),
			app_token:app_token
		};
		$.post("dragon_boat_login_status.htm", param, function(data) {
			if(data.loginStatus == 1) {
				if(device) {
					window.location.href="/h5/ext/activity/dragon_boat_bill.htm?device=app&app_token="+app_token;
				} else {
					window.location.href="/h5/ext/activity/dragon_boat_bill.htm";
				}
			} else {
				if(device) {
					window.location.href="/h5/ext/activity/dragon_boat_festival.htm?device=app&app_view=login";
				} else {
					window.location.href="/h5/login.htm?tab=account&returnUrl=/h5/ext/activity/dragon_boat_festival.htm";
				}
			}
		}, "json");
	});
	
})
</script>
</body>
</html>